<template>
  <div class="app-container">
    <div style="padding: 10px;">
      <el-button type="primary" @click="handleWindowPrint( '#demo', nickName+'-个人培训记录-'+new Date().toLocaleString())">导出</el-button>
      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-back" @click="goBack">返回
      </el-button>
    </div>

    <div id="demo">

      <table class="MsoTableGrid" border="1" cellspacing="0" cellpadding="0"
             width="0" style="border-collapse:collapse;border:none;margin-left:6.8pt;
 margin-right:6.8pt;height:auto;width:auto"
      >
        <tr style="mso-yfti-irow:0;mso-yfti-firstrow:yes;height:34.95pt">
          <td width="142" valign="top" style="width:106.35pt;border:solid windowtext 1.0pt;
  mso-border-alt:solid windowtext .5pt;padding:0cm 5.4pt 0cm 5.4pt;height:34.95pt"
          >
            <p class="MsoNormal" align="center" style="text-align:center"><span
              style="font-size:14.0pt;font-family:仿宋"
            >姓名<span lang="EN-US">   </span></span></p>
          </td>
          <td width="173" colspan="2" valign="top" style="width:129.6pt;border:solid windowtext 1.0pt;
  border-left:none;mso-border-left-alt:solid windowtext .5pt;mso-border-alt:
  solid windowtext .5pt;padding:0cm 5.4pt 0cm 5.4pt;height:34.95pt"
          >
            <p class="MsoNormal" align="center" style="text-align:center"><span lang="EN-US"
                                                                                style="font-size:14.0pt;font-family:仿宋"
            >  {{ nickName }} </span></p>
          </td>
          <td width="92" valign="top" style="width:69.15pt;border:solid windowtext 1.0pt;
  border-left:none;mso-border-left-alt:solid windowtext .5pt;mso-border-alt:
  solid windowtext .5pt;padding:0cm 5.4pt 0cm 5.4pt;height:34.95pt"
          >
            <p class="MsoNormal" align="center" style="text-align:center"><span
              style="font-size:14.0pt;font-family:仿宋"
            >出生年月<span lang="EN-US">   </span></span></p>
          </td>
          <td width="226" colspan="2" valign="top" style="width:169.8pt;border:solid windowtext 1.0pt;
  border-left:none;mso-border-left-alt:solid windowtext .5pt;mso-border-alt:
  solid windowtext .5pt;padding:0cm 5.4pt 0cm 5.4pt;height:34.95pt"
          >
            <p class="MsoNormal" align="center" style="text-align:center"><span lang="EN-US"
                                                                                style="font-size:14.0pt;font-family:仿宋"
            >  {{birthday}} </span></p>
          </td>
        </tr>
        <tr style="mso-yfti-irow:1;height:34.85pt">
          <td width="142" valign="top" style="width:106.35pt;border:solid windowtext 1.0pt;
  border-top:none;mso-border-top-alt:solid windowtext .5pt;mso-border-alt:solid windowtext .5pt;
  padding:0cm 5.4pt 0cm 5.4pt;height:34.85pt"
          >
            <p class="MsoNormal" align="center" style="text-align:center"><span
              style="font-size:14.0pt;font-family:仿宋"
            >科室<span lang="EN-US">   </span></span></p>
          </td>
          <td width="173" colspan="2" valign="top" style="width:129.6pt;border-top:none;
  border-left:none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
  mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
  mso-border-alt:solid windowtext .5pt;padding:0cm 5.4pt 0cm 5.4pt;height:34.85pt"
          >
            <p class="MsoNormal" align="center" style="text-align:center"><span lang="EN-US"
                                                                                style="font-size:14.0pt;font-family:仿宋"
            >  {{ deptName }} </span></p>
          </td>
          <td width="92" valign="top" style="width:69.15pt;border-top:none;border-left:
  none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
  mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
  mso-border-alt:solid windowtext .5pt;padding:0cm 5.4pt 0cm 5.4pt;height:34.85pt"
          >
            <p class="MsoNormal" align="center" style="text-align:center"><span
              style="font-size:14.0pt;font-family:仿宋"
            >职务<span lang="EN-US">   </span></span></p>
          </td>
          <td width="226" colspan="2" valign="top" style="width:169.8pt;border-top:none;
  border-left:none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
  mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
  mso-border-alt:solid windowtext .5pt;padding:0cm 5.4pt 0cm 5.4pt;height:34.85pt"
          >
            <p class="MsoNormal" align="center" style="text-align:center"><span lang="EN-US"
                                                                                style="font-size:14.0pt;font-family:仿宋"
            >  {{zhiwu}}</span></p>
          </td>
        </tr>
        <tr style="mso-yfti-irow:2">
          <td width="633" colspan="6" valign="top" style="width:474.9pt;border:solid windowtext 1.0pt;
  border-top:none;mso-border-top-alt:solid windowtext .5pt;mso-border-alt:solid windowtext .5pt;
  padding:0cm 5.4pt 0cm 5.4pt"
          >
            <p class="MsoNormal" align="center" style="text-align:center"><span
              style="font-size:14.0pt;font-family:仿宋"
            >年度参加培训情况<span lang="EN-US">   </span></span></p>
          </td>
        </tr>
        <tr style="mso-yfti-irow:3">
          <td width="142" valign="top" style="width:106.35pt;border:solid windowtext 1.0pt;
  border-top:none;mso-border-top-alt:solid windowtext .5pt;mso-border-alt:solid windowtext .5pt;
  padding:0cm 5.4pt 0cm 5.4pt"
          >
            <p class="MsoNormal" align="center" style="text-align:center"><span
              style="font-size:13.0pt;font-family:仿宋"
            >培训班次名称<span lang="EN-US">   </span></span></p>
          </td>
          <td width="85" valign="top" style="width:63.75pt;border-top:none;border-left:
  none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
  mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
  mso-border-alt:solid windowtext .5pt;padding:0cm 5.4pt 0cm 5.4pt"
          >
            <p class="MsoNormal" align="center" style="text-align:center"><span
              style="font-size:13.0pt;font-family:仿宋"
            >主办单位<span lang="EN-US">   </span></span></p>
          </td>
          <td width="88" valign="top" style="width:65.85pt;border-top:none;border-left:
  none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
  mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
  mso-border-alt:solid windowtext .5pt;padding:0cm 5.4pt 0cm 5.4pt"
          >
            <p class="MsoNormal" align="center" style="text-align:center"><span
              style="font-size:13.0pt;font-family:仿宋"
            >培训时间<span lang="EN-US">   </span></span></p>
          </td>
          <td width="92" valign="top" style="width:69.15pt;border-top:none;border-left:
  none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
  mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
  mso-border-alt:solid windowtext .5pt;padding:0cm 5.4pt 0cm 5.4pt"
          >
            <p class="MsoNormal" align="center" style="text-align:center"><span
              style="font-size:13.0pt;font-family:仿宋"
            >培训日期<span lang="EN-US">   </span></span></p>
          </td>
          <td width="92" valign="top" style="width:69.15pt;border-top:none;border-left:
  none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
  mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
  mso-border-alt:solid windowtext .5pt;padding:0cm 5.4pt 0cm 5.4pt"
          >
            <p class="MsoNormal" align="center" style="text-align:center"><span
              style="font-size:13.0pt;font-family:仿宋"
            >培训地点<span lang="EN-US">   </span></span></p>
          </td>
          <td width="134" valign="top" style="width:100.65pt;border-top:none;border-left:
  none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
  mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
  mso-border-alt:solid windowtext .5pt;padding:0cm 5.4pt 0cm 5.4pt"
          >
            <p class="MsoNormal" align="center" style="text-align:center"><span
              style="font-size:13.0pt;font-family:仿宋"
            >培训内容<span lang="EN-US">   </span></span></p>
          </td>
        </tr>

        <tr style="mso-yfti-irow:4" v-for="(list,i) in trainForm" :key="list.trainId">
          <td width="142" valign="top" style="width:106.35pt;border:solid windowtext 1.0pt;
  border-top:none;mso-border-top-alt:solid windowtext .5pt;mso-border-alt:solid windowtext .5pt;
  padding:0cm 5.4pt 0cm 5.4pt"
          >
            <p class="MsoNormal" align="center" style="text-align:center"><span lang="EN-US"
                                                                                style="font-size:13.0pt;font-family:仿宋"
            >  &nbsp; {{ list.trainName }}</span></p>
          </td>
          <td width="85" valign="top" style="width:63.75pt;border-top:none;border-left:
  none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
  mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
  mso-border-alt:solid windowtext .5pt;padding:0cm 5.4pt 0cm 5.4pt"
          >
            <p class="MsoNormal" align="center" style="text-align:center"><span lang="EN-US"
                                                                                style="font-size:13.0pt;font-family:仿宋"
            >  &nbsp; {{ list.trainHostDept }}</span></p>
          </td>
          <td width="88" valign="top" style="width:65.85pt;border-top:none;border-left:
  none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
  mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
  mso-border-alt:solid windowtext .5pt;padding:0cm 5.4pt 0cm 5.4pt"
          >
            <p class="MsoNormal" align="center" style="text-align:center"><span lang="EN-US"
                                                                                style="font-size:13.0pt;font-family:仿宋"
            >  &nbsp; {{ list.trainHours }}</span></p>
          </td>
          <td width="92" valign="top" style="width:69.15pt;border-top:none;border-left:
  none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
  mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
  mso-border-alt:solid windowtext .5pt;padding:0cm 5.4pt 0cm 5.4pt"
          >
            <p class="MsoNormal" align="center" style="text-align:center"><span lang="EN-US"
                                                                                style="font-size:13.0pt;font-family:仿宋"
            >  &nbsp; {{ list.trainTime }}</span></p>
          </td>
          <td width="92" valign="top" style="width:69.15pt;border-top:none;border-left:
  none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
  mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
  mso-border-alt:solid windowtext .5pt;padding:0cm 5.4pt 0cm 5.4pt"
          >
            <p class="MsoNormal" align="center" style="text-align:center"><span lang="EN-US"
                                                                                style="font-size:13.0pt;font-family:仿宋"
            >  &nbsp; {{ list.trainPlace }}</span></p>
          </td>
          <td width="134" valign="top" style="width:180.65pt;border-top:none;border-left:
  none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
  mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
  mso-border-alt:solid windowtext .5pt;padding:0cm 5.4pt 0cm 5.4pt"
          >
            <p class="MsoNormal" align="center" style="text-align:center"><span lang="EN-US"
                                                                                style="font-size:10.0pt;font-family:仿宋"
            >  &nbsp; {{ list.trainContent }}</span></p>
          </td>
        </tr>
        <tr style="mso-yfti-irow:7;mso-yfti-lastrow:yes">
          <td width="142" valign="top" style="width:106.35pt;border:solid windowtext 1.0pt;
  border-top:none;mso-border-top-alt:solid windowtext .5pt;mso-border-alt:solid windowtext .5pt;
  padding:0cm 5.4pt 0cm 5.4pt"
          >
            <p class="MsoNormal" align="center" style="text-align:center"><span
              style="font-size:13.0pt;font-family:仿宋"
            >全年培训总时长<span lang="EN-US"></span></span></p>
          </td>
          <td width="491" colspan="5" valign="top" style="width:13.0cm;border-top:none;
  border-left:none;border-bottom:solid windowtext 1.0pt;border-right:solid windowtext 1.0pt;
  mso-border-top-alt:solid windowtext .5pt;mso-border-left-alt:solid windowtext .5pt;
  mso-border-alt:solid windowtext .5pt;padding:0cm 5.4pt 0cm 5.4pt"
          >
            <p class="MsoNormal" align="center" style="text-align:center"><span lang="EN-US"
                                                                                style="font-size:13.0pt;font-family:仿宋"
            >{{ traintotal }}小时</span></p>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>

import htmlToPdf from '@/utils/htmlToPdf'
import { ownExcelInfo } from '@/api/train/train'
import { checkPermi, checkRole } from '@/utils/permission' // 权限判断函数
export default {
  name: 'ownTrainExcel',
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      approvalLogs: [],
      trainId: null,
      nickName: null,
      deptName: null,
      birthday:null,
      zhiwu:[],
      traintotal: null,
      trainForm: [],
      fileList: [],
      options: [{
        value: 1,
        label: '确定'
      }, {
        value: 2,
        label: '未发生'
      }
      ],
      shengpiForm: {}
    }
  },
  filters: {
    typeFilter(type) {
      return calendarTypeKeyValue[type]
    }
  },
  created() {
    this.userId = this.$route.query.userId
    this.getTrainlValue()
  },

  methods: {
    checkPermi,
    checkRole,
    getList() {
      if (0) {
        this.$message.error('id不能为空，请从下下载！')
        this.goBack()
      } else {
        this.$http({
          url: this.$http.adornUrl(`/sys/sysapprovelog/list`),
          method: 'post',
          data: {
            approve_type: 6

          }
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.approvalLogs = data.sysApproveLogs

          }
        })
      }

    },
    handleWindowPrint(ele, fileName) {
      // 留存原来的 html
      // let bdHtml = window.document.body.innerHTML;
      // let bdHtml = document.querySelector('#app').innerHTML;

      // 要打印的 内容 html
      // document.body.innerHTML =  document.querySelector('#demo').innerHTML;
      // document.body.innerHTML =  document.querySelector('#demo').outerHTML;
      // document.querySelector('#app').innerHTML =  document.querySelector('#demo').outerHTML;
      // document.querySelector('#main').innerHTML =  document.querySelector('#demo').outerHTML;

      // 去除页面不必要的 head 标签内  内容， 避免影响打印页 ， title 为保存为 pdf 的文件时的 文件名
      document.head.innerHTML = '<meta charset="utf-8">\n' +
        ' <title> ' + fileName + '</title>\n' +
        ' <meta name="format-detection" content="telephone=no">\n' +
        ' <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">\n' +
        ' <meta name="viewport" content="width=device-width,initial-scale=1.0">\n' +
        ' <link rel="stylesheet" href="./static/css/contract.css"/>'  // 生成pdf的外部css样式
      // document.body.innerHTML =  document.querySelector('#demo').outerHTML;
      // document.querySelector('#main').innerHTML =  document.querySelector('#demo').outerHTML;
      // document.body.innerHTML =  document.querySelector('#demo').outerHTML;
      document.body.innerHTML = document.querySelector(ele).outerHTML

      // window.print();

      // 转异步 等待dom元素渲染（样式）完毕在打印
      setTimeout(() => {
        // 打印
        window.print()
        // 刷新页面
        window.location.reload()
      }, 20)

      // 重新设会当前页面
      // window.document.body.innerHTML = bdHtml;
      // document.querySelector('#app').innerHTML =  bdHtml;
      // 刷新页面
      // window.location.reload();
    },
    getTrainlValue() {
      ownExcelInfo(this.userId).then((response) => {
        this.trainForm = response.data.ExcelList
        this.nickName = response.data.nickName
        this.deptName = response.data.deptName
        this.zhiwu=response.data.zhiwu
        this.birthday=response.data.birthday
        this.traintotal = response.data.traintotal
        this.traintotal=this.traintotal.toFixed(2)
      })
    },
    // 获取文件名称
    getFileName(name) {
      if (name.lastIndexOf('/') > -1) {
        var name1 = name.slice(name.lastIndexOf('/') + 1)
        return name1.substring(0, name1.lastIndexOf('_')) + '.' + name1.slice(name1.lastIndexOf('.') + 1)
      } else {
        return ''
      }
    },
    goBack() {
      this.$router.go(-1)
    },
    handleDown() {
      htmlToPdf.downloadPDF(document.querySelector('#demo'), '培训流水号' + '-流水号：' + this.$route.query.userId)
    }

  }
}
</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="ProgId" content="Word.Document">
<meta name="Generator" content="Microsoft Word 15">
<meta name="Originator" content="Microsoft Word 15">
<link rel="File-List" href="姓名.files/filelist.xml">
<style>

  /* Font Definitions */
  @font-face {
    font-family: "Cambria Math";
    panose-1: 2 4 5 3 5 4 6 3 2 4;
    mso-font-charset: 0;
    mso-generic-font-family: roman;
    mso-font-pitch: variable;
    mso-font-signature: -536869121 1107305727 33554432 0 415 0;
  }

  @font-face {
    font-family: 仿宋;
    panose-1: 2 1 6 9 6 1 1 1 1 1;
    mso-font-charset: 134;
    mso-generic-font-family: modern;
    mso-font-pitch: fixed;
    mso-font-signature: -2147482945 953122042 22 0 262145 0;
  }

  @font-face {
    font-family: "\@仿宋";
    mso-font-charset: 134;
    mso-generic-font-family: modern;
    mso-font-pitch: fixed;
    mso-font-signature: -2147482945 953122042 22 0 262145 0;
  }

  /* Style Definitions */
  p.MsoNormal, li.MsoNormal, div.MsoNormal {
    mso-style-unhide: no;
    mso-style-qformat: yes;
    mso-style-parent: "";
    margin: 0cm;
    margin-bottom: .0001pt;
    text-align: justify;
    text-justify: inter-ideograph;
    mso-pagination: none;
    font-size: 10.5pt;
    mso-bidi-font-size: 11.0pt;
    font-family: 等线;
    mso-ascii-font-family: 等线;
    mso-ascii-theme-font: minor-latin;
    mso-fareast-font-family: 等线;
    mso-fareast-theme-font: minor-fareast;
    mso-hansi-font-family: 等线;
    mso-hansi-theme-font: minor-latin;
    mso-bidi-font-family: "Times New Roman";
    mso-bidi-theme-font: minor-bidi;
    mso-font-kerning: 1.0pt;
  }

  p.MsoListParagraph, li.MsoListParagraph, div.MsoListParagraph {
    mso-style-priority: 34;
    mso-style-unhide: no;
    mso-style-qformat: yes;
    margin: 0cm;
    margin-bottom: .0001pt;
    text-align: justify;
    text-justify: inter-ideograph;
    text-indent: 21.0pt;
    mso-char-indent-count: 2.0;
    mso-pagination: none;
    font-size: 10.5pt;
    mso-bidi-font-size: 11.0pt;
    font-family: 等线;
    mso-ascii-font-family: 等线;
    mso-ascii-theme-font: minor-latin;
    mso-fareast-font-family: 等线;
    mso-fareast-theme-font: minor-fareast;
    mso-hansi-font-family: 等线;
    mso-hansi-theme-font: minor-latin;
    mso-bidi-font-family: "Times New Roman";
    mso-bidi-theme-font: minor-bidi;
    mso-font-kerning: 1.0pt;
  }

  .MsoChpDefault {
    mso-style-type: export-only;
    mso-default-props: yes;
    font-family: 等线;
    mso-bidi-font-family: "Times New Roman";
    mso-bidi-theme-font: minor-bidi;
  }

  /* Page Definitions */
  @page {
    mso-page-border-surround-header: no;
    mso-page-border-surround-footer: no;
  }

  @page WordSection1 {
    size: 595.3pt 841.9pt;
    margin: 72.0pt 90.0pt 72.0pt 90.0pt;
    mso-header-margin: 42.55pt;
    mso-footer-margin: 49.6pt;
    mso-paper-source: 0;
    layout-grid: 15.6pt;
  }

  div.WordSection1 {
    page: WordSection1;
  }


  /* Style Definitions */
  table.MsoNormalTable {
    mso-style-name: 普通表格;
    mso-tstyle-rowband-size: 0;
    mso-tstyle-colband-size: 0;
    mso-style-noshow: yes;
    mso-style-priority: 99;
    mso-style-parent: "";
    mso-padding-alt: 0cm 5.4pt 0cm 5.4pt;
    mso-para-margin: 0cm;
    mso-para-margin-bottom: .0001pt;
    mso-pagination: widow-orphan;
    font-size: 10.5pt;
    mso-bidi-font-size: 11.0pt;
    font-family: 等线;
    mso-ascii-font-family: 等线;
    mso-ascii-theme-font: minor-latin;
    mso-fareast-font-family: 等线;
    mso-fareast-theme-font: minor-fareast;
    mso-hansi-font-family: 等线;
    mso-hansi-theme-font: minor-latin;
    mso-font-kerning: 1.0pt;
  }

  table.MsoTableGrid {
    mso-style-name: 网格型;
    mso-tstyle-rowband-size: 0;
    mso-tstyle-colband-size: 0;
    mso-style-priority: 39;
    mso-style-unhide: no;
    border: solid windowtext 1.0pt;
    mso-border-alt: solid windowtext .5pt;
    mso-padding-alt: 0cm 5.4pt 0cm 5.4pt;
    mso-border-insideh: .5pt solid windowtext;
    mso-border-insidev: .5pt solid windowtext;
    mso-para-margin: 0cm;
    mso-para-margin-bottom: .0001pt;
    mso-pagination: widow-orphan;
    font-size: 10.5pt;
    mso-bidi-font-size: 11.0pt;
    font-family: 等线;
    mso-ascii-font-family: 等线;
    mso-ascii-theme-font: minor-latin;
    mso-fareast-font-family: 等线;
    mso-fareast-theme-font: minor-fareast;
    mso-hansi-font-family: 等线;
    mso-hansi-theme-font: minor-latin;
    mso-font-kerning: 1.0pt;
  }

</style>

</head>

<style scoped>
#demo {
  background-color: #fff;
  width: 1000px;
  /* height: 400px; */
  margin: auto;
  padding: 40px;
  box-sizing: border-box;
}

</style>
